import {designPage, useStyleCache} from "@peryl/react-compose";
import {useCmsEditorOption} from "../module/cms-visual-editor";
import {CmsEditor} from "../../packages";
import {ClientZoom} from "plain-design";
import {RouteSelector} from "../components/RouteSelector";

export default designPage(() => {

  const option = useCmsEditorOption({
    isRunning: false,
    titleRightContent: () => <RouteSelector/>,
  });

  const styles = useStyleCache(style => {
    style.minHeight = `calc(100vh / ${ClientZoom.get()})`;
  });

  return () => (
    <CmsEditor option={option} style={styles.value}/>
  );
});
